import React from "react";
import {
    ActivityIndicator,
    AsyncStorage,
    StatusBar,
    StyleSheet,
    View,
    Text,
    Button,
} from "react-native";
import { StackNavigator, SwitchNavigator, SafeAreaView } from "react-navigation";

class Screen1 extends React.Component {
    render() {
        return (
            <SafeAreaView
                style={{ backgroundColor: "pink" }}
            >
            <SafeAreaView
                style={{ backgroundColor: "pink" }}
            >
                <StatusBar barStyle="light-content" backgroundColor="red" />
                <Text style={{ color: "#fff" }}>
                    Light Screen
                </Text>
                <Button
                    title="Next screen"
                    onPress={() => this.props.navigation.navigate("Screen2")}
                    color="blue"
                />
            </SafeAreaView>
                
            </SafeAreaView>
        );
    }
}

class Screen2 extends React.Component {
    render() {
        return (
            <SafeAreaView
                style={{ backgroundColor: "#ecf0f1" }}
            >
                <StatusBar barStyle="dark-content" backgroundColor="#ecf0f1" />
                <Text>Dark Screen</Text>
                <Button
                    title="Next screen"
                    onPress={() => this.props.navigation.navigate("Screen1")}
                />
            </SafeAreaView>
        );
    }
}

export default StackNavigator(
    {
        Screen1: {
            screen: Screen1
        },
        Screen2: {
            screen: Screen2
        }
    },
    {
        headerMode: "none"
    }
);
